<template>
  <div class="page-header-wrapper" :class="[initClass]">
    <a-page-header
      class="pt-24"
      :breadcrumb="{ props: { routes, itemRender } }"
      :sub-title="subTitle"
    >
      <template #extra>
        <slot name="extra"></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: 'PageHeaderWrapper',
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    breadcrumb: {
      type: [Array, Boolean],
      default: false
    },
    breadcrumbPush: {
      type: [Array, Object],
      default () {
        return []
      }
    },
    breadcrumbSplice: {
      type: Array,
      default () {
        return []
      }
    },
    noLine: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      routes: this.breadcrumb,
      defaultTitle: this.title || this.$route.meta.title
    }
  },
  created () {
    // 面包屑
    if (!this.breadcrumb) {
      // .filter(route => route.meta.title !== '数据概览')
      this.routes = this.$route.matched.concat().map(function (route) {
        return {
          path: route.path,
          breadcrumbName: route.meta.title
        }
      })
      this.routes.push(...this.breadcrumbPush)
      if (this.breadcrumbSplice.length) {
        this.routes.splice(...this.breadcrumbSplice)
      }
      // 去掉数据概览默认路由
      this.routes = this.routes.slice(1, this.routes.length)
      console.error('---routes->>', this.routes)

    }
  },
  computed: {
    initClass () {
      return {
        'no-line': this.noLine
      }
    }
  },
  methods: {
    itemRender ({ route, params, routes, paths, h }) {
      if (route.path === this.$route.path || route.path === null) {
        return route.breadcrumbName
      }
      return h('router-link', {
        attrs: {
          to: {
            path: route.path || '/',
            params: params
          }
        }
      }, [route.breadcrumbName])
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-wrapper {
  padding-bottom: 2px;

  .back {
    cursor: pointer;
  }
}
</style>
